/**
 * 创元汇 - WebName
 * https://menger.me
 * @大梦
 */

import React, {Component} from 'react'
import {
    Text,
    View,
    Image,
    TextInput,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    StatusBar,
    WebView,
    Platform
} from 'react-native'
import { StackActions, NavigationActions } from 'react-navigation';
import NetRequest from '../../utils/utilsRequest'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import ServicesApi from '../../constants/ServicesApi'
import GlobalStyles from '../../constants/GlobalStyles'
import NavigationBar from '../../components/common/NavigationBar'
import UtilsView from '../../utils/utilsView'
import { toastShort, toastLong, consoleLog } from '../../utils/utilsToast'
import AlertManager from '../../components/common/AlertManager'
import {Overlay, Label, Button} from 'teaset';
export default class Huifangquerenshu extends Component {

    constructor(props) {
        super(props);
        const { params } = this.props.navigation.state;
        this.state =  {
            wenti1: 2,
            wenti2: 2,
            wenti3: 2,
            wenti4: 2,
            wenti5: 2,
            wenti6: 2,
            isTongyi: 2,
            fund_id: params.fund_id,
            title: params.title,
        }
        // this.netRequest = new NetRequest();
    }

    componentDidMount(){
        this.loadNetData();
    }

    onBack = () => {
        this.props.navigation.goBack();
    }

    updateState= (state) => {
        if (!this) { return };
        this.setState(state);
    }

    loadNetData = () => {
        
    }

    Subziliao = () => {
        
        let wenti1 = this.state.wenti1,
            wenti2 = this.state.wenti2,
            wenti3 = this.state.wenti3,
            wenti4 = this.state.wenti4,
            wenti5 = this.state.wenti5,
            wenti6 = this.state.wenti6

        if(wenti1 != 1 || wenti2 != 1 || wenti3 != 1 || wenti4 != 1 || wenti5 != 1 || wenti6 != 1){
            const params = {
                title: '温馨提示',
                detail: '无法签署本确认书，所有选项均选“是”才可以签署，点击“继续”返回填写，点击“退出”返回基金详情页。',
                actions: [
                    { title: '退出', titleStyle: {  }, actionStyle: {  }, onPress: () => { 
                        this.onBack();
                    } },
                    { title: '继续', onPress: () => { 
                        
                    } }
                ]
            }
            AlertManager.show(params)
            return false
        }

        if(this.state.isTongyi == 1) {
            let url = ServicesApi.get_url_009;
            let data = {
                fund_id: this.state.fund_id,
                member_id: global.user.userData.id,
                token: global.user.userData.token
            }

            Services.post(url, data, true)
                .then( result => {
                    console.log(result);
                    if (result && result.code == StatusCode.SUCCESS_CODE) {
                        this.querenshu(result.data.url, result.data.show_url);
                    }else{
                        toastShort(result.msg);
                    }
                })
                .catch( error => {
                    // toastShort('服务器请求失败，请稍后重试！');
                })
        }else {
            toastShort('请勾选以上确认声明');
        }
        

            
    }

    querenshu = (shuju, show_link) => {
        let overlayView = (
            <Overlay.PullView side='bottom' modal={false} ref={v => this.overlayView = v}>
                <View style={{backgroundColor: '#fff', width: GlobalStyles.width, height: GlobalStyles.height}}>
                    <WebView
                        startInLoadingState={true}
                        source={{uri: show_link}}
                        style={styles.webContainer}
                    />
                    
                    <View style={styles.botBar}>
                        <TouchableOpacity onPress={()=>{this.overlayView && this.overlayView.close()}} style={styles.botLeft}>
                            <Text style={[styles.botLeftText, {fontSize: 15}]}>取消</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={()=>{this.submit009(shuju);}} style={styles.botRight}>
                            <Text style={styles.botRightText}>同意签署</Text>
                        </TouchableOpacity> 
                    </View>
                </View>
            </Overlay.PullView>
        );
        Overlay.show(overlayView);
    }

    submit009 = (shuju) => {
        let url = ServicesApi.create_pdf;
        let data = {
            url: shuju,
            style: '009',
            fund_id: this.state.fund_id,
            member_id: global.user.userData.id,
            token: global.user.userData.token,
        }
        AlertManager.showPopView(<View style={[GlobalStyles.loadingview, GlobalStyles.flexColumnCenter]}><Image source={require('../../assets/images/icons/loading.gif')} style={GlobalStyles.loading} /><Text style={GlobalStyles.loadingtext}>文件生成中，请稍候...</Text></View>, { modal:true })
        Services.post(url, data, true)
        .then( result => {
            console.log(result);
            AlertManager.hide();
            if (result && result.code == StatusCode.SUCCESS_CODE) {
                const params = {
                    title: '温馨提示',
                    detail: '尊敬的会员，您已成功签署《回访确认书》，请点击“继续”，返回基金详情页，点击“退出”，返回软件主界面',
                    actions: [
                        { title: '退出', titleStyle: {  }, actionStyle: {  }, onPress: () => { 
                            this.overlayView && this.overlayView.close()
                            setTimeout(() => {
                                const resetAction = NavigationActions.reset({
                                    index: 0,
                                    actions: [
                                        NavigationActions.navigate({ routeName: 'TabNavScreen'})
                                    ]
                                })
                                this.props.navigation.dispatch(resetAction)
                            }, 101)
                        } },
                        { title: '继续', onPress: () => { 
                            this.overlayView && this.overlayView.close()
                            this.onBack();
                        } }
                    ]
                }
                AlertManager.show(params)
                
            }else{
                toastLong(result.msg);
            }
        })
        .catch( error => {
            // toastShort('服务器请求失败，请稍后重试！');
        })
    }

    setTongyi = (num) => {
        this.updateState({
            isTongyi: num
        })
    }

    render(){
        let navigationBar = {
            backgroundColor: '#fff',
            borderBottomColor: '#f2f2f2',
            borderBottomWidth: 1
        }
        return (
            <View style={styles.container}>
                <NavigationBar
                    title = {'回访确认书'}
                    style = {navigationBar}
                    titleStyle = {{color: '#333333'}}
                    leftButton = {UtilsView.getLeftBlackButton(() => this.onBack())}
                />
                <StatusBar
                    animated = {true}
                    hidden = {false}
                    backgroundColor = {'transparent'}
                    translucent = {true}
                    barStyle = {'dark-content'}
                />
                <KeyboardAwareScrollView keyboardShouldPersistTaps={'handled'}>
                    <View style={[GlobalStyles.whiteModule, {marginTop: 10}]}>
                        <Text style={[GlobalStyles.defaultText, {fontSize: 14}]}>根据中基协发布的《私募投资基金募集行为管理办法》中的规定，募集机构（北京创元汇资本管理有限公司）应当在投资冷静期（24小时）期满后，对您进行回访。请您仔细阅读以下问题：</Text>
                        <View style={[GlobalStyles.mradio]}>
                            <View style={[GlobalStyles.radioItem, GlobalStyles.flexColumnStart]}>
                                <Text style={[GlobalStyles.radioRight, {textAlign: 'justify'}]}>1.您本人是否决定购买“{this.state.title}”？</Text>
                            </View>
                            <View style={[styles.shifouWrap, GlobalStyles.flexRowBetween]}>
                            {this.state.wenti1 == 1 ?
                                <TouchableOpacity onPress={()=>{this.updateState({wenti1: 1})}} style={[styles.shifou, styles.shifouActive, {marginRight: 10}]}>
                                    <Text style={[styles.shifouText, styles.shifouTextActive]}>是</Text>
                                </TouchableOpacity>
                                :
                                <TouchableOpacity onPress={()=>{this.updateState({wenti1: 1})}} style={[styles.shifou, {marginRight: 10}]}>
                                    <Text style={[styles.shifouText]}>是</Text>
                                </TouchableOpacity>
                            }
                            {this.state.wenti1 == 0 ?
                                <TouchableOpacity onPress={()=>{this.updateState({wenti1: 0})}} style={[styles.shifou, styles.shifouActive,]}>
                                    <Text style={[styles.shifouText, styles.shifouTextActive]}>否</Text>
                                </TouchableOpacity>
                                :
                                <TouchableOpacity onPress={()=>{this.updateState({wenti1: 0})}} style={styles.shifou}>
                                    <Text style={styles.shifouText}>否</Text>
                                </TouchableOpacity>
                            }
                            </View>
                        </View>
                        <View style={[GlobalStyles.mradio]}>
                            <View style={[GlobalStyles.radioItem, GlobalStyles.flexColumnStart]}>
                                <Text style={[GlobalStyles.radioRight, {textAlign: 'justify'}]}>2.您是否仔细阅读了我们发布的《{this.state.title}之募集说明书》及《签约文件填写指引》？</Text>
                            </View>
                            <View style={[styles.shifouWrap, GlobalStyles.flexRowBetween]}>
                            {this.state.wenti2 == 1 ?
                                <TouchableOpacity onPress={()=>{this.updateState({wenti2: 1})}} style={[styles.shifou, styles.shifouActive, {marginRight: 10}]}>
                                    <Text style={[styles.shifouText, styles.shifouTextActive]}>是</Text>
                                </TouchableOpacity>
                                :
                                <TouchableOpacity onPress={()=>{this.updateState({wenti2: 1})}} style={[styles.shifou, {marginRight: 10}]}>
                                    <Text style={[styles.shifouText]}>是</Text>
                                </TouchableOpacity>
                            }
                                {this.state.wenti2 == 0 ?
                                <TouchableOpacity onPress={()=>{this.updateState({wenti2: 0})}} style={[styles.shifou, styles.shifouActive,]}>
                                    <Text style={[styles.shifouText, styles.shifouTextActive]}>否</Text>
                                </TouchableOpacity>
                                :
                                <TouchableOpacity onPress={()=>{this.updateState({wenti2: 0})}} style={styles.shifou}>
                                    <Text style={styles.shifouText}>否</Text>
                                </TouchableOpacity>
                            }
                            </View>
                        </View>
                        <View style={[GlobalStyles.mradio]}>
                            <View style={[GlobalStyles.radioItem, GlobalStyles.flexColumnStart]}>
                                <Text style={[GlobalStyles.radioRight, {textAlign: 'justify'}]}>3.您的风险承担能力是否与所投资的私募基金产品相匹配？</Text>
                            </View>
                            <View style={[styles.shifouWrap, GlobalStyles.flexRowBetween]}>
                             {this.state.wenti3 == 1 ?
                                <TouchableOpacity onPress={()=>{this.updateState({wenti3: 1})}} style={[styles.shifou, styles.shifouActive, {marginRight: 10}]}>
                                    <Text style={[styles.shifouText, styles.shifouTextActive]}>是</Text>
                                </TouchableOpacity>
                                :
                                <TouchableOpacity onPress={()=>{this.updateState({wenti3: 1})}} style={[styles.shifou, {marginRight: 10}]}>
                                    <Text style={[styles.shifouText]}>是</Text>
                                </TouchableOpacity>
                            }
                                 {this.state.wenti3 == 0 ?
                                <TouchableOpacity onPress={()=>{this.updateState({wenti3: 0})}} style={[styles.shifou,  styles.shifouActive,]}>
                                    <Text style={[styles.shifouText, styles.shifouTextActive]}>否</Text>
                                </TouchableOpacity>
                                :
                                <TouchableOpacity onPress={()=>{this.updateState({wenti3: 0})}} style={styles.shifou}>
                                    <Text style={styles.shifouText}>否</Text>
                                </TouchableOpacity>
                            }
                            </View>
                        </View>
                        <View style={[GlobalStyles.mradio]}>
                            <View style={[GlobalStyles.radioItem, GlobalStyles.flexColumnStart]}>
                                <Text style={[GlobalStyles.radioRight, {textAlign: 'justify'}]}>4.您是否知悉未来有可能承担的投资损失 ?</Text>
                            </View>
                            <View style={[styles.shifouWrap, GlobalStyles.flexRowBetween]}>
                            {this.state.wenti4 == 1 ?
                                <TouchableOpacity onPress={()=>{this.updateState({wenti4: 1})}} style={[styles.shifou, styles.shifouActive, {marginRight: 10}]}>
                                    <Text style={[styles.shifouText, styles.shifouTextActive]}>是</Text>
                                </TouchableOpacity>
                                :
                                <TouchableOpacity onPress={()=>{this.updateState({wenti4: 1})}} style={[styles.shifou, {marginRight: 10}]}>
                                    <Text style={[styles.shifouText]}>是</Text>
                                </TouchableOpacity>
                            }
                            {this.state.wenti4 == 0 ?
                                <TouchableOpacity onPress={()=>{this.updateState({wenti4: 0})}} style={[styles.shifou, styles.shifouActive,]}>
                                    <Text style={[styles.shifouText, styles.shifouTextActive]}>否</Text>
                                </TouchableOpacity>
                                :
                                <TouchableOpacity onPress={()=>{this.updateState({wenti4: 0})}} style={styles.shifou}>
                                    <Text style={styles.shifouText}>否</Text>
                                </TouchableOpacity>
                            }
                            </View>
                        </View>
                        <View style={[GlobalStyles.mradio]}>
                            <View style={[GlobalStyles.radioItem, GlobalStyles.flexColumnStart]}>
                                <Text style={[GlobalStyles.radioRight, {textAlign: 'justify'}]}>5.您是否知悉投资冷静期的起算时间、期间以及享有的权利？</Text>
                            </View>
                            <View style={[styles.shifouWrap, GlobalStyles.flexRowBetween]}>
                            {this.state.wenti5 == 1 ?
                                <TouchableOpacity onPress={()=>{this.updateState({wenti5: 1})}} style={[styles.shifou, styles.shifouActive, {marginRight: 10}]}>
                                    <Text style={[styles.shifouText, styles.shifouTextActive]}>是</Text>
                                </TouchableOpacity>
                                :
                                <TouchableOpacity onPress={()=>{this.updateState({wenti5: 1})}} style={[styles.shifou, {marginRight: 10}]}>
                                    <Text style={[styles.shifouText]}>是</Text>
                                </TouchableOpacity>
                            }
                                {this.state.wenti5 == 0 ?
                                <TouchableOpacity onPress={()=>{this.updateState({wenti5: 0})}} style={[styles.shifou, styles.shifouActive,]}>
                                    <Text style={[styles.shifouText, styles.shifouTextActive]}>否</Text>
                                </TouchableOpacity>
                                :
                                <TouchableOpacity onPress={()=>{this.updateState({wenti5: 0})}} style={styles.shifou}>
                                    <Text style={styles.shifouText}>否</Text>
                                </TouchableOpacity>
                            }
                            </View>
                        </View>
                        <View style={[GlobalStyles.mradio]}>
                            <View style={[GlobalStyles.radioItem, GlobalStyles.flexColumnStart]}>
                                <Text style={[GlobalStyles.radioRight, {textAlign: 'justify'}]}>6.您是否知悉纠纷解决安排？</Text>
                            </View>
                            <View style={[styles.shifouWrap, GlobalStyles.flexRowBetween]}>
                             {this.state.wenti6 == 1 ?
                                <TouchableOpacity onPress={()=>{this.updateState({wenti6: 1})}} style={[styles.shifou, styles.shifouActive, {marginRight: 10}]}>
                                    <Text style={[styles.shifouText, styles.shifouTextActive]}>是</Text>
                                </TouchableOpacity>
                                :
                                <TouchableOpacity onPress={()=>{this.updateState({wenti6: 1})}} style={[styles.shifou, {marginRight: 10}]}>
                                    <Text style={[styles.shifouText]}>是</Text>
                                </TouchableOpacity>
                            }
                                 {this.state.wenti6 == 0 ?
                                <TouchableOpacity onPress={()=>{this.updateState({wenti6: 0})}} style={[styles.shifou,  styles.shifouActive,]}>
                                    <Text style={[styles.shifouText, styles.shifouTextActive]}>否</Text>
                                </TouchableOpacity>
                                :
                                <TouchableOpacity onPress={()=>{this.updateState({wenti6: 0})}} style={styles.shifou}>
                                    <Text style={styles.shifouText}>否</Text>
                                </TouchableOpacity>
                            }
                            </View>
                        </View>
                    </View>
                    
                    <View style={[GlobalStyles.whiteModule, {marginTop: 0}]}>
                        {(this.state.isTongyi != 0) && (this.state.isTongyi != 2) ?
                            <TouchableOpacity 
                                onPress={() => {this.setTongyi(0)}} 
                                style={[GlobalStyles.mradio, {width: GlobalStyles.width - 30, marginTop: 10, marginBottom: 0}]}
                            >
                                <View style={[GlobalStyles.radioItem, GlobalStyles.flexRowStartStart]}>
                                    <View style={[GlobalStyles.checkboxLeft, {borderColor: GlobalStyles.themeColor, backgroundColor: GlobalStyles.themeColor}]}>
                                        <Image source={require('../../assets/images/icons/icon_gouxuan.png')} style={[GlobalStyles.gouxuanIco]} />
                                    </View>
                                    <Text style={GlobalStyles.radioRightThemeColor}>以上问题确认无误！</Text>
                                </View>
                            </TouchableOpacity>
                        :
                            <TouchableOpacity 
                                onPress={() => {this.setTongyi(1)}} 
                                style={[GlobalStyles.mradio, {width: GlobalStyles.width - 30, marginTop: 10, marginBottom: 0}]}
                            >
                                <View style={[GlobalStyles.radioItem, GlobalStyles.flexRowStartStart]}>
                                    <View style={[GlobalStyles.checkboxLeft, {borderColor: '#666', }]}></View>
                                    <Text style={GlobalStyles.radioRightThemeColor}>以上问题确认无误！</Text>
                                </View>
                            </TouchableOpacity>
                        }
                    </View>
                    <TouchableOpacity onPress={()=>this.Subziliao()} style={[GlobalStyles.submit, {marginBottom: 15, marginTop: 15, backgroundColor: GlobalStyles.themeColor, height: 45, marginTop: 30}]}>
                        <View style={GlobalStyles.btn}>
                            <Text style={GlobalStyles.btna}>提交</Text>   
                        </View>
                    </TouchableOpacity>
                </KeyboardAwareScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    shifouWrap: {
        width: GlobalStyles.width - 30
    },
    shifou: {
        // width: (GlobalStyles.width - 30)/2,
        height: 45,
        borderWidth: 1,
        borderColor: GlobalStyles.themeColor,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
        // backgroundColor: '#f00'
    },
    shifouText: {
        textAlign: 'center',
        fontSize: 16,
        color: GlobalStyles.themeColor,
    },
    shifouActive: {
        backgroundColor: GlobalStyles.themeColor,
    },
    shifouTextActive: {
        color: '#fff',
        
    },
    spacialText: {
        height:45,
        fontSize:15,
        textAlign:'left',
        color:'#525252',
        borderBottomWidth:1,
        borderBottomColor:'#ececec',
    },
    webContainer: {
        width: GlobalStyles.width,
        height: GlobalStyles.height,
        flex: 1,
        backgroundColor: '#fff',
        marginTop: Platform.OS === 'ios' ? -15 : 0,
    },
    botBar: {
        height: 54,
        backgroundColor: '#fff',
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderTopColor: '#ececec',
        borderTopWidth: 1,

    },
    botLeft: {
        height: 54,
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    },
    botLeftIco: {
        height: 24,

    },
    botLeftText: {
        fontSize: 13,
        color: '#666',
        height: 20,
        lineHeight: 20,
    },
    botRight: {
        flex: 2.5,
        backgroundColor: GlobalStyles.themeColor,
        height: 54,
        justifyContent: 'center',
        alignItems: 'center',

    },
    botRightText: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold'
    },
});
